<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="keywords" content="弹出层" />
		<link rel="stylesheet" href="CSS/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="CSS/demo.css" />
		<link rel="stylesheet" href="CSS/hwLayer.css">
		<link rel="stylesheet" href="CSS/pick-pcc.min.1.0.1.css">
		<link rel="stylesheet" href="CSS/编辑按钮.css" type="text/css">
	    <link rel="stylesheet" href="CSS/设置头像.css" type="text/css">
        <script src="JS/jquery-3.1.0.js"></script>
		<style>
			.title1 {
				margin-left: 200px;
				font-size: 20px;
				font-weight: bold;
			}
			
			.txt1 {
				width: 120px;
				height: 40px;
				font-size: 17px;
				text-align: left;
			}
			
			.textarea1 {
				width: 450px;
				height: 70px;
				border-radius: 5px;
				border: 1px solid #DBDBDB;
			}
			
			.input1 {
				width: 330px;
				height: 40px;
				border-radius: 5px;
				border: 1px solid #DBDBDB;
			}
			
			table {
				width: 800px;
			}
			
			.savebtn {
				background-color: #CA141D;
				font-size: 20px;
				color: white;
				width: 172px;
				height: 46px;
				margin-left: 30px;
				border-radius: 5px;
				border: 1px solid #DBDBDB;
			}
			
			.cancelbtn1 {
				font-size: 20px;
				width: 172px;
				height: 46px;
				margin-left: 20px;
				border-radius: 5px;
				border: 1px solid #DBDBDB;
			}
			
			.btnDiv {
				width: 500px;
			}
		</style>
	<title>个人信息</title>
		<link href="CSS/PersonNews.css" rel="stylesheet" type="text/css"/>
		<script>
			function setWidth(){
				var h = document.body.clientWidth;
				document.getElementById("container").style.width=h+"px";
			}
			
 </script>


 <script src="JS/PersonNews.js" type="text/javascript">
 </script>
	</head>
	<body onload="setWidth()" bgcolor="#f5f5f5">
		<div id="container">
		  <div class="Account_security">
		  	 <div class="Account_security_logo">
		  	 	<div class="Account_security_photo">
		  	 		<img src="img/n-logo.png" />
		  	 	</div>
		  	 	<div class="Account_security_exit">
		  	 		<p class="Account_security_exit_font">退出</p>
		  	 	</div>
		  	 </div>
		  	 <div class=Account_security_title>
		  	 	<ul >
		  	 		<li class="Account_security_title_li"><a href="Account_security.jsp" class="Account_security_title_li_a" title="账号安全">账号安全</a></li>
		  	 		<li class="Account_security_title_li"><a href="PersonNews.jsp" class="Account_security_title_li_a" title="个人信息">个人信息</a></li>
		  	 		<li class="Account_security_title_li"><a href="#" class="Account_security_title_li_a" title="绑定授权">绑定授权</a></li>
		  	 		<li class="Account_security_title_li"><a href="#" class="Account_security_title_li_a" title="小米服务">小米服务</a></li>
		  	 		<li class="Account_security_title_li"><a href="#" class="Account_security_title_li_a" title="设备管理">设备管理</a></li>
		  	 	</ul>
		  	 	<div class="Account_security_title_p">
		  	 		<p class="Account_security_title_P_font">请设置名字</p>
		  	 	</div>
		  	 	<div class="Account_security_title_p1">
		  	 		<p class="Account_security_title_p1_font">2279902253</p>
		  	 	</div>
		  	 </div>
		  	 <div class="Account_security_content">
		  	 	<div class="Account_security_content_photo">
		  	 		<p class="Account_security_content_img"></p>
		  	 	</div>
		  	 	<div class="personNews_content">
		  	 		<div class="Account_security_content_photo1">
		  	 		<p class="Account_security_content_img"></p>
		  	 		<p class="personNews_content_wenzi" title="设置头像">
		  	 			设置头像
		  	 		</p>
		  	 	</div>
		  	 	<div class="personNew_content1">
		  	 		<p class="personNew_content1_wenzi">基础资料</p>
		  	 		<p class="personNew_content1_wenzi1" title="编辑">
		  	 			
		  	 			<img src="img/下载.png"/>&nbsp;
		  	 			<a class="show-layer" data-show-layer="hw-layer" role="button" style="color: #337AB7; text-decoration: none;">编辑</a>
		  	 			 <div class="optlist">
		</div>
		  	 		</p>
		  	 	</div>
		  	 	<div class="personNew_content2">
		  	 		<p class="personNew_content2_wenzi1">姓名:&nbsp;&nbsp;<span class="personNew_content2_wenzi2">请设置名字</span></p>
		  	 	</div>
		  	 	<div class="personNew_content2">
		  	 		<p class="personNew_content2_wenzi1">性别:</p>
		  	 	</div>
		  	 	
		  	 	<div class="personNew_content3">
		  	 		<p class="personNew_content1_wenzi">高级设置</p>
		  	 		<p class="personNew_content1_wenzi1" title="管理">管理</p>
		  	 	</div>
		  	 	<div class="personNew_content2">
		  	 		<p class="personNew_content2_wenzi1">银行卡</p>
		  	 	</div>
		  	 	<div class="personNew_content2">
		  	 		<p class="personNew_content2_wenzi1">账号地区:&nbsp;&nbsp;中国</p>
		  	 	</div>
		  	 	</div>
		  	 </div>
		  	 <div class="Account_security_foot">
		  	 	<ul>
		  	 		<li class="Account_security_foot_li">简体&nbsp;&nbsp;|</li>
		  	 		<li class="Account_security_foot_li">繁体&nbsp;&nbsp;|</li>
		  	 		<li class="Account_security_foot_li">English&nbsp;&nbsp;|</li>
		  	 		<li class="Account_security_foot_li">常见问题</li>
		  	 	</ul>
		  	 </div>
		  	 <div class="Account_security_foot1">
		  	 	<p class="Account_security_foot1_wenzi">小米公司版权所有-京ICP备10046444-<img src="img/ghs.png"/>
		  	 		京公网安备11010802020134号-京ICP证110507号</p>
		  	 </div>
           </div>
           
		</div>
		
		
		
		
		<div class="container">
             <div class="hw-overlay" id="hw-layer">
				<div class="hw-layer-wrap">
					<button type="button" class="close hwLayer-close"></button>
					
					<div class="row">
                    	<div class="col-md-9 col-sm-12">
                    		<Button class="bianji_exit" >X</Button>
                    		<div class="bianji_content">
                    		<p class="bianji_content_wenzi">编辑基础资料
                    		</p>
                    	</div>
                    		<p class="bianji_content1"></p>
                    		<div class="bianji_content2">
                    			<p class="bianji_content2_wenzhi">姓名：</p>
                    			<p class="bianji_content2_input"><input type="text" class="input" style="width: 270px; height: 40px; outline: none;" onfocus="dian()" onblur="quxiao()"  /></p>
                    		</div>
                    		<span class="tishi"></span>
                    		<div class="bianji_content3">
                    			<p class="bianji_content2_wenzhi">性别：</p>
                    			<p class="bianji_content3_input">
                    				<input type="radio" style="width:20px; height: 20px;" name="name1" value="1"/>
                    				<div class="bianji_content3_wenzi1">
                    				<span class="bianji_content3_wenzi">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    				</div>
                    				<div class="bianji_content3_input1">
                    				<input type="radio" style="width:20px; height: 20px;" name="name1" value="2"/>
                                     </div>
                                     <div class="bianji_content3_wenzi2">
                                     <span>&nbsp;女</span>
                                     </div>
                    				
                    		    </p>
                    		    <div class="bianji_content4_btn" id="btn1" >
                    	  	  <p class="bianji_content4_wenzhi" style="color: #F5F5F5; font-size: 14px;" title="确定" >确定</p>
                    	  </div>
                    	   <div class="bianji_content4_btn1">
                    	  	  <p class="bianji_content4_wenzhi" style="color: #555555 font-size: 14px;" title="取消">取消</p>
                    	  </div>
                    	  </div>
                    	  
							
				</div>




				<script type="text/javascript" src="JS/bianji.js"></script>
				<script type="text/javascript" src="JS/pick-pcc.min.1.0.1.js"></script>
				<script>
					$(function() {
						//展示层
						function showLayer(id) {
							var layer = $('#' + id),
								layerwrap = layer.find('.hw-layer-wrap');
							layer.fadeIn();
							//屏幕居中
							layerwrap.css({
								'margin-top': -layerwrap.outerHeight() / 2
							});
						}

						//隐藏层
						function hideLayer() {
							$('.hw-overlay').fadeOut();
						}

						$('.hwLayer-ok,.hwLayer-cancel,.hwLayer-close').on('click', function() {
							hideLayer();
						});

						//触发弹出层
						$('.show-layer').on('click', function() {
							var layerid = $(this).data('show-layer');
							showLayer(layerid);
						});

						//点击或者触控弹出层外的半透明遮罩层，关闭弹出层
						$('.hw-overlay').on('click', function(event) {
							if(event.target == this) {
								hideLayer();
							}
						});

						//按ESC键关闭弹出层
						$(document).keyup(function(event) {
							if(event.keyCode == 27) {
								hideLayer();
							}
						});
						
						$(".bianji_exit").click(function(){
							
							$("#hw-layer").hide();
							$(".input").val("");
							
						});
						
						$(".bianji_content4_btn1 .bianji_content4_wenzhi").click(function(){
							$("#hw-layer").hide();
						});
					});

					  
				</script>
	</body>
</html>
    